import React, { Component } from 'react'
import { withRouter, Redirect } from 'react-router-dom'
import './css/PopUpBox.less'

class PopUpBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            PopUpBoxHide: true
        }
    }

    componentDidMount() {
        if (this.props.refs) {
            this.props.refs(this)
        }
    }

    componentWillReceiveProps() {
    }


    render() {
        var { params } = this.props
        return (
            this.state.PopUpBoxHide ? '' :
                <div className="PopUpBox">
                    <div className="maskMainBox">
                        {
                            params.independentContent ?
                                <div className="maskInfoLayout">
                                    {params.independentContent}
                                </div> : <div>
                                    {
                                        params.type === 'notice' ? <div className="maskInfoBox maskInfoLayout">
                                            <div className="maskTopInfo">
                                                <img className="maskTopBg" src={require('../common/img/project/maskTitleBg@2x.png')} alt="" />
                                                <div className="maskTopTitle">{params.title}</div>
                                            </div>
                                            <div className="maskInfo">
                                                
                                                {params.content.map((item)=>{
                                                    return(
                                                        <p className="text_info">{item}</p>
                                                    )
                                                })}
                                            </div>
                                            <div className="maskInfoBtnBox">
                                                <button onClick={() => {
                                                    if(params.onClick){
                                                        this.changeStatus('btn')
                                                        setTimeout(() => {
                                                            params.onClick()
                                                        }, 200);
                                                        
                                                        
                                                    }else{
                                                        this.changeStatus('btn')
                                                    }
                                                    
                                                }} className="maskInfoBtn">我知道了</button>
                                            </div>
                                        </div> : ''
                                    }
                                    {
                                        params.type === 'codeImg' ? <div className="maskCodeInfoBox maskInfoLayout">
                                            <div className="maskCodeInfoTitle">{params.title}</div>
                                            <img className="maskCodeInfoImg" src={params.codeUrl} alt="" />
                                            <div className="maskCodeInfoTip">扫描二维码，完成{params.title}</div>
                                        </div> : ''
                                    }
                                </div>
                        }
                        <img onClick={() => {
                            this.changeStatus()
                        }} className="maskCloseImg" src={require('../common/img/project/shut_down_icon@2x.png')} alt="" />
                    </div>
                </div>
        )
    }


    changeStatus = (type) => {
        this.setState({
            PopUpBoxHide: !this.state.PopUpBoxHide
        })
    }
}

export default withRouter(PopUpBox)
